<template>
  <div>
    <el-row>
      <el-button size="mini" plain type="primary" @click="onAddAccount()"
        >新增</el-button
      >
      <el-button size="mini" plain type="primary" @click="openData()"
        >刷新</el-button
      >
      <el-button size="mini" plain type="primary" @click="onRefreshAccount()"
        >刷新中间件百度账号信息</el-button
      >
    </el-row>
    <div style="height: 15px"></div>

    <el-table ref="myTable" :data="FAccountList" :height="FTableHeight" border>
      <el-table-column prop="FAppCode" label="配置代码" />
      <el-table-column prop="FAppID" label="百度AppID" />
      <el-table-column prop="FAppSecret" label="百度密钥" />
      <el-table-column prop="FAccessToken" label="Token" />
      <el-table-column prop="FAccessTokenExpireIn" label="有效期秒" />
      <el-table-column prop="FAccessTokenLastTime" label="最后时间" />
      <el-table-column prop="FIsUse" label="启用">
        <template #default="scope">
          <el-switch disabled v-model="scope.row.FIsUse" />
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="onEditAccount(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="onDelAccount(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="FShowEdit" center destroy-on-close>
      <el-form :model="FIndexAccount" label-width="120px">
        <el-form-item label="配置代码">
          <el-input v-model="FIndexAccount.FAppCode"></el-input>
        </el-form-item>
        <el-form-item label="百度APPID">
          <el-input
            v-model="FIndexAccount.FAppID"
            placeholder="必填，百度开发AppID"
          ></el-input>
        </el-form-item>

        <el-form-item label="开发密钥">
          <el-input
            v-model="FIndexAccount.FAppSecret"
            placeholder="必填，百度开发密钥"
          ></el-input>
        </el-form-item>

        <el-form-item label="启用">
          <el-switch v-model="FIndexAccount.FIsUse" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="FShowEdit = false">取 消</el-button>
          <el-button type="primary" @click="onSaveAccount">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import TFormBase from "@/views/BaseForm";
import BaiduAdminApi, { TBaiduAccount } from "@/baselib/module/baidu/BaiduApi";
export default class TFormBaiduAccountList extends TFormBase {
  declare $refs: {
    myTable: any;
  };
  private FTableHeight: number = 200;
  private FIndexAccount: TBaiduAccount = new TBaiduAccount();
  private FAccountList: TBaiduAccount[] = [];
  private FShowEdit: Boolean = false;
  //
  public created() {
    this.openData();
  }

  public mounted() {
    //自适应列表高
    this.$nextTick(() => {
      if (this.$refs.myTable.$el != null) {
        this.FTableHeight =
          window.innerHeight - this.$refs.myTable.$el.offsetTop - 150;
      }
    });
    window.addEventListener("resize", () => {
      this.$nextTick(() => {
        if (this.$refs.myTable.$el != null) {
          this.FTableHeight =
            window.innerHeight - this.$refs.myTable.$el.offsetTop - 150;
        }
      });
    });
  }
  private onAddAccount() {
    this.FIndexAccount = new TBaiduAccount();
    this.FShowEdit = true;
  }
  private async openData() {
    var lResult = await BaiduAdminApi.GetWXAccountList();
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FAccountList = lResult.resultData;
    this.$myMsgHelp.msgHintAutoClose("打开数据成功");
  }
  private async onSaveAccount() {
    this.FShowEdit = false;
    //保存
    let lResult = await BaiduAdminApi.SaveBaiduAccount(this.FIndexAccount);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }

    this.$myMsgHelp.msgHintAutoClose("保存成功");
    this.openData();
  }
  private async onRefreshAccount() {
    //惘新服务端配置
    let lResult = await BaiduAdminApi.RefreshAccount();
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose("刷新服务端配置成功");
  }
  private onEditAccount(qItem: TBaiduAccount) {
    this.FIndexAccount = qItem;
    this.FShowEdit = true;
  }
  private async onDelAccount(qItem: TBaiduAccount) {
    let lConfirm = await this.$myMsgHelp.msgDialogConfirm(
      "确定要删除此百度账号配置？"
    );
    if (!lConfirm) {
      return;
    }
    let lResult = await BaiduAdminApi.DelAccount(qItem.FAccountID);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose("删除记录成功");
    let lIndxe = this.FAccountList.findIndex((item) => {
      return item.FAccountID == qItem.FAccountID;
    });
    if (lIndxe >= 0) {
      this.FAccountList.splice(lIndxe, 1);
    }
  }
}
</script>

